<template>
  <el-dialog v-if="dialogVisiable" v-model="dialogVisiable" :title="title" width="1000px">
    <div class="block-title">基本信息</div>
    <div class="form">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" inline>
        <el-form-item prop="name" label="统计名称：" label-width="100">
          <el-input v-model="dialogForm.name" :disabled="type === 'view'" placeholder="请输入" clearable style="width: 200" />
        </el-form-item>
        <el-form-item label="机型:" prop="aircraft">
          <el-select v-model="dialogForm.aircraft" clearable :disabled="type === 'view'">
            <el-option v-for="(item, index) in pageAircraftTypes" :key="'type' + index" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="block-title">数据及参数设置</div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item, index) in datas" :key="'tab-pane-' + index" :label="item.label" :name="item.field">
        <div class="border-1 border-solid border-#e4e4e4">
          <div class="p-2">
            <el-button type="primary" :disabled="type === 'view'" @click="handleSelect(item.label)">选择数据</el-button>
            <el-table :data="item.tableDatas" height="200" class="mt-2">
              <el-table-column label="序号" width="55" type="index"></el-table-column>
              <el-table-column prop="loadExperimentName" label="任务名称" min-width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="机型" width="80" prop="modelType"></el-table-column>
              <el-table-column label="载荷分类" width="100" prop="loadType"></el-table-column>
              <el-table-column label="阶段" width="80" prop="stage"></el-table-column>
              <el-table-column label="载荷版本" width="100" prop="version"></el-table-column>
              <el-table-column label="轮次" width="100" prop="round"></el-table-column>
              <el-table-column label="操作" width="80" fixed="right">
                <template #default="scope">
                  <el-button size="small" link type="primary" :disabled="type === 'view'" @click="handleDelete(item.tableDatas, scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="btnLoading" @click="closeDialog">取消</el-button>
        <el-button v-if="type !== 'view'" :loading="btnLoading" type="primary" @click="saveDialog">确定</el-button>
      </div>
    </template>
    <SelectTaskDialog ref="selectTaskDialogRef" @on-sure="handleSelectSure" />
  </el-dialog>
</template>

<script setup name="StatisticDetailDialog" lang="ts">
import { aircraftTypes } from '@/api/loadProcessingAlgorithm/index';
import { getTaskWorkspaceDetail, editTaskWorkspace, addTaskWorkspace } from '@/api/loadProcessingAlgorithm/experimentResultStatistic/index';
import SelectTaskDialog from './selectTaskDialog.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['on-refresh']);
const dialogVisiable = ref(false);
const tableDatas = ref([]);
const pageAircraftTypes = ref(aircraftTypes);
const title = ref('新增');
const type = ref('add');
const dataId = ref('');
const btnLoading = ref(false);
const selectTaskDialogRef = ref();
const activeName = ref('first');
const dialogFormRef = ref();
const dialogForm = reactive({
  name: '',
  aircraft: ''
});
const rules = reactive({
  name: [{ required: true, message: '统计名称不能为空', trigger: 'blur' }],
  aircraft: [{ required: true, message: '机型不能为空', trigger: 'change' }]
});
const datas = ref([
  {
    label: '飞行载荷',
    field: 'first',
    tableDatas: []
  },
  {
    label: '地面载荷',
    field: 'second',
    tableDatas: []
  },
  {
    label: '动载荷',
    field: 'third',
    tableDatas: []
  }
]);
const closeDialog = () => {
  dialogVisiable.value = false;
};
const initData = () => {
  if (type.value === 'add') {
    title.value = '新增';
  } else if (type.value === 'edit') {
    title.value = '编辑';
  } else {
    title.value = '详情';
  }
  if (type.value !== 'add') {
    getTaskWorkspaceDetail(dataId.value).then((res) => {
      const data = res.data;
      dialogForm.name = data.name;
      dialogForm.aircraft = data.aircraft;
      datas.value.forEach((element) => {
        const arr = data.relatedExperiments.filter((item) => item.loadName === element.label);
        element.tableDatas = arr;
      });
    });
  }
};
const openDialog = async (data, id) => {
  type.value = data;
  dataId.value = id;
  activeName.value = 'first';
  initData();
  dialogVisiable.value = true;
};
const handleDelete = async (arr, index) => {
  await proxy?.$modal.confirm('是否确认删除该数据?');
  arr.splice(index, 1);
};
const handleSelect = (label) => {
  selectTaskDialogRef.value.openDialog(label, dialogForm.aircraft);
};
const handleSelectSure = (data) => {
  const obj = datas.value.find((item) => item.field === activeName.value);
  if (obj) {
    obj.tableDatas = data;
  }
};
const runDialog = () => {};
const saveDialog = () => {
  dialogFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      btnLoading.value = true;
      let arr = [];
      datas.value.forEach((element) => {
        arr = [...arr, ...element.tableDatas];
      });
      const obj = {
        id: dataId.value,
        name: dialogForm.name,
        description: '',
        relatedExperiments: arr,
        aircraft: dialogForm.aircraft
      };
      if (type.value === 'add') {
        addTaskWorkspace(obj)
          .then((res) => {
            proxy?.$modal.msgSuccess('新增成功！');
            emit('on-refresh');
            btnLoading.value = false;
            closeDialog();
          })
          .catch(() => {
            btnLoading.value = false;
          });
      } else {
        editTaskWorkspace(obj)
          .then((res) => {
            proxy?.$modal.msgSuccess('编辑成功！');
            emit('on-refresh');
            btnLoading.value = false;
            closeDialog();
          })
          .catch(() => {
            btnLoading.value = false;
          });
      }
    } else {
      proxy?.$modal.msgWarning('请填写完整信息！');
    }
  });
};
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.block-title {
  color: #1890ff;
  font-size: 14px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.block-title::before {
  content: '';
  width: 3px;
  height: 15px;
  background-color: #48a1f5;
  margin-right: 8px;
}
.dialog-footer {
  text-align: center;
}
</style>
